<!DOCTYPE html>
<html>

<head>
	<title>医院</title>
</head>

<body>
	<div style="padding: 16px;">
		<div class="layui-card">
			<div class="layui-card-body">
				<form id="searchbar" class="layui-form" onsubmit="javascript:return false;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<input class="layui-input" type="text" name="keyWord" placeholder="请输入搜索内容">
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-primary" data-toggle="tableSearch"><i
									class="layui-icon layui-icon-search"></i></button>
						</div>
					</div>
				</form>
				<table id="tableHospital" lay-filter="tableHospital"></table>
				<script type="text/html" id="toolbar">
		  		<div class="layui-btn-container">
		    		<button class="layui-btn layui-btn-sm" data-perm="hospital/add" onclick="add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
		  		</div>
				</script>
				<script type="text/html" id="handbar">
		  		<a lay-event="custom" href="javascript:void(0)" data-handle="toSight"><i class="layui-icon layui-icon-camera icon-view" title="医院风彩"></i></a>
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="hospital/edit" lay-event="custom" data-handle="edit" title="编辑"><i class="layui-icon layui-icon-edit icon-edit"></i></a>
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="hospital/delete" lay-event="custom" data-handle="deleteHandle" title="删除"><i class="layui-icon layui-icon-delete icon-dele"></i></a>
			</script>
			</div>
		</div>
	</div>

	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding: 20px;">
		<form  class="layui-form" id="dialogForm" lay-filter="dialogForm" onsubmit="return beforeSubmit();" >
		<input type="text" name="id" hidden>
		 <div class="layui-form-item">
		    <label class="layui-form-label required">医院编码</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="code" lay-verify="required"  lay-verType="tips"    autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">医院名称</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="name" lay-verify="required"  lay-verType="tips"    autocomplete="off" >
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">地区</label>
		    <div class="layui-input-block">
				<input class="layui-input" id="regionCode" name="regionCode"/>
		    </div>
		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label">地址</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="address" autocomplete="off" >
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">备注</label>
		    <div class="layui-input-block">
		      <textarea  class="layui-textarea"  name="remark" autocomplete="off" ></textarea>
		    </div>
		  </div>
  		  <div class="layui-form-item">
		    <div class="layui-input-block" align="right"  style="height: auto">
		      <button type="submit" class="layui-btn ">保存</button>
		    </div>
		  </div>
		</form>
		</div>
	</script>
</body>
<script>
	var content = layui.content;
	var request = layui.request;
	var form = layui.form;
	var button = layui.button;
	var layer = layui.layer;
	var layCascader = layui.layCascader;
	var tableInst = null;
	var dialogHtml = $("#dialog").html();
	var dialogData = {
		handle: '',
		dialogIndex: '',
	};



	$(function () {
		var options = {
			elem: "#tableHospital",
			layfilter: "tableHospital",
			toolbar: '#toolbar',
			url: "hospital/search",
			where: {
				sort: 'createtime', //排序字段
				order: 'asc' //排序方式
			},
			cols: [[
				{field: 'code', title: '编码'}, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				{field: 'name', title: '医院名称'},
				{field: 'address', title: '地址'},
				{field: 'remark', title: '备注'},
				{field: 'createtime', title: '创建时间', align: 'center', sort: true},
				{fixed: 'right', title: '操作', templet: '#handbar', width: 150}
			]]
		};
		tableInst = content.initTable(options);
	})

	function add() {
		dialogData.handle = "hospital/add";
		dialogData.dialogIndex = content.dialog('添加医院', '600px', dialogHtml);
		initRegionSelect();
	}

	function toSight(row) {
		layui.admin.toPage('医院风采', 'view/baseData/hospitalSight.html');
	}
	function edit(row) {
		dialogData.handle = "hospital/edit";
		dialogData.dialogIndex = content.dialog('修改医院', '600px', dialogHtml);
		$("#dialogForm input[name='code']").addClass("layui-disabled").attr("disabled", "true")
		form.val("dialogForm", row)
		var inst = initRegionSelect();
		var regionCode = row.regionCode
		if (regionCode && (regionCode.length == 6)) {
			packSelectOptions(regionCode).then(res => {
				inst.setOptions(res)
				inst.setValue(regionCode)
			})
		}
	}

	function deleteHandle(row) {
		content.confirm("确认删除医院" + row.name, function () {
			request.postAlert("hospital/delete", {id: row.id}).then(res => {
				tableInst.reloadData();
			})
		})
	}

	function beforeSubmit() {
		var btn = button.load({elem: "#dialogForm button[type='submit']"});
		if (!form.validate(".layui-form")) {
			btn.stop();
			return false;
		}
		var data = form.val("dialogForm");
		request.postAlert(dialogData.handle, data).then(res => {
			layer.close(dialogData.dialogIndex);
			tableInst.reloadData();
		}).catch(err => {
			btn.stop();
		})
		return false;
	}

	function initRegionSelect(data) {
		return layCascader({
			elem: '#regionCode',
			options: data,
			props: {
				value: "code",
				label: "name",
				lazy: true,
				lazyLoad(node, resolve) {
					const {level, value} = node
					const data = {id: value}
					if (node.root) {
						data.id = '0'
					}
					request.post('region/listByPCode', data).then(res => {
						const nodes = res.data.map(item => {
							item.leaf = level >= 1
							return item
						})
						resolve(nodes)
					})

				},
			}
		});
	}

	function packSelectOptions(regionCode) {
		var regionArr = [regionCode.substr(0, 2) + '0000', regionCode.substr(0, 4) + '00', regionCode]
		var provCode = regionArr[0]
		var cityCode = regionArr[1]
		var provArr = []
		var cityArr = []
		var regionArr = []
		return new Promise(resole => {
			Promise.all([
				request.post('region/listByPCode', {id: '0'}).then(res => {
					return res.data
				}),

				request.post('region/listByPCode', {id: provCode}).then(res => {
					return res.data
				}),
				request.post('region/listByPCode', {id: cityCode}).then(res => {
					return res.data
				})
			]).then(regions => {
				provArr = regions[0]
				cityArr = regions[1]
				provArr.forEach(item => {
					item.leaf = false
					if (item.code == provCode) {
						item.children = cityArr
					}
				})
				regionArr = regions[2]
				cityArr.forEach(item => {
					item.leaf = false
					if (item.code == cityCode) {
						item.children = regionArr
					}
				})
				return resole(provArr);
			})
		})

	}
</script>
<style scoped>
	.icon-edit {
		font-size: 20px;
		color: #2f60c2;
		margin-right: 10px;
	}

	.icon-dele {
		font-size: 20px;
		color: #ff5722;
		margin-right: 10px;
	}

	.icon-view {
		font-size: 20px;
		color: #16b777;
		margin-right: 10px;
	}
</style>

</html>